<!DOCTYPE html>

<html>
<head>
  <title>settingsView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>settingsView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="settings-view">SETTINGS VIEW</h2>

        
      
        
        <p>Represents the Settings overlay.</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">SettingsView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">OverlayView</span></span>

    <span class="attribute">$chkFullscreen</span>: <span class="literal">null</span>             <span class="comment"># the start maximized checkbox</span>
    <span class="attribute">$chkAutoRefresh</span>: <span class="literal">null</span>           <span class="comment"># the autorefresh checkbox</span>
    <span class="attribute">$chkDebug</span>: <span class="literal">null</span>                 <span class="comment"># the debug checkbox</span>
    <span class="attribute">$debugNote</span>: <span class="literal">null</span>                <span class="comment"># the debug performance note</span>
    <span class="attribute">$modifierDelete</span>: <span class="literal">null</span>           <span class="comment"># the "Delete" modifier keys div</span>
    <span class="attribute">$modifierMultiple</span>: <span class="literal">null</span>         <span class="comment"># the "Multiple" modifier keys div</span>
    <span class="attribute">$modifierToBack</span>: <span class="literal">null</span>           <span class="comment"># the "To Back" modifier keys div</span>
    <span class="attribute">$localStorageDiv</span>: <span class="literal">null</span>          <span class="comment"># the local storage contents wrapper</span>
    <span class="attribute">$localStorageClearBut</span>: <span class="literal">null</span>     <span class="comment"># the "Clear local storage" button</span>
    <span class="attribute">$serverErrorsDiv</span>: <span class="literal">null</span>          <span class="comment"># the server errors contents wrapper</span>
    <span class="attribute">$serverErrorsClearBut</span>: <span class="literal">null</span>     <span class="comment"># the "Clear server errors" button</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Init the Settings overlay view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>:<span class="function"> =&gt;</span>
        <span class="property">@overlayInit</span> <span class="string">"#settings"</span>
        <span class="property">@setDom</span>()
        <span class="property">@setEvents</span>()</pre></div>
        
      
        
        <p>Dispose the Settings overlay view and set the frame source to blank.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span>
        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Set the DOM elements cache.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setDom</span>:<span class="function"> =&gt;</span>
        <span class="property">@$menuItem</span> = $ <span class="string">"#menu-settings"</span>

        <span class="property">@$chkFullscreen</span> = $ <span class="string">"#settings-chk-fullscreen"</span>
        <span class="property">@$chkAutoRefresh</span> = $ <span class="string">"#settings-chk-autorefresh"</span>
        <span class="property">@$chkDebug</span> = $ <span class="string">"#settings-chk-debug"</span>
        <span class="property">@$debugNote</span> = <span class="property">@$el</span>.find <span class="string">".options div.error"</span>

        <span class="property">@$modifierDelete</span> = $ <span class="string">"#settings-modifierkeys-delete"</span>
        <span class="property">@$modifierMultiple</span> = $ <span class="string">"#settings-modifierkeys-multiple"</span>
        <span class="property">@$modifierToBack</span> = $ <span class="string">"#settings-modifierkeys-toback"</span>

        <span class="property">@$localStorageDiv</span> = $ <span class="string">"#settings-localstorage-contents"</span>
        <span class="property">@$localStorageClearBut</span> = $ <span class="string">"#settings-localstorage-clear-but"</span>
        <span class="property">@$serverLogsDiv</span> = $ <span class="string">"#settings-serverlogs-contents"</span>
        <span class="property">@$serverLogsClearBut</span> = $ <span class="string">"#settings-serverlogs-clear-but"</span></pre></div>
        
      
        
        <p>Bind events to the DOM.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@$chkFullscreen</span>.click <span class="property">@toggleMapFullscreen</span>
        <span class="property">@$chkAutoRefresh</span>.click <span class="property">@toggleMapAutoRefresh</span>
        <span class="property">@$chkDebug</span>.click <span class="property">@toggleDebug</span>

        <span class="property">@$localStorageClearBut</span>.click <span class="property">@clearLocalStorage</span>
        <span class="property">@$serverLogsClearBut</span>.click <span class="property">@clearServerErrors</span>

        <span class="property">@$el</span>.find(<span class="string">".modifiers .group span"</span>).click <span class="property">@modifierClick</span></pre></div>
        
      
        
        <h2 id="options">OPTIONS</h2>

        
      
        
        <p>Bind options and general user settings to the view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindOptions</span>:<span class="function"> =&gt;</span>
        <span class="property">@$chkFullscreen</span>.prop <span class="string">"checked"</span>, SystemApp.Data.userSettings.mapFullscreen()
        <span class="property">@$chkAutoRefresh</span>.prop <span class="string">"checked"</span>, SystemApp.Data.userSettings.mapAutoRefresh()
        <span class="property">@$chkDebug</span>.prop <span class="string">"checked"</span>, SystemApp.Settings.general.debug

        <span class="property">@$debugNote</span>.hide() <span class="keyword">if</span> <span class="keyword">not</span> SystemApp.Settings.general.debug</pre></div>
        
      
        
        <p>When user check/uncheck the &quot;start maximized&quot; map option.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleMapFullscreen</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        SystemApp.Data.userSettings.mapFullscreen <span class="property">@$chkFullscreen</span>.prop <span class="string">"checked"</span></pre></div>
        
      
        
        <p>When user check/uncheck the &quot;auto refresh data&quot; map option.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleMapAutoRefresh</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        SystemApp.Data.userSettings.mapAutoRefresh <span class="property">@$chkAutoRefresh</span>.prop <span class="string">"checked"</span></pre></div>
        
      
        
        <p>When user check/uncheck the &quot;enable debug mode&quot; option.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleDebug</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        value = <span class="property">@$chkDebug</span>.prop <span class="string">"checked"</span>
        SystemApp.toggleDebug value</pre></div>
        
      
        
        <p>Hide or show debug alert based on current debug status.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> value
            <span class="property">@$debugNote</span>.show()
        <span class="keyword">else</span>
            <span class="property">@$debugNote</span>.hide()</pre></div>
        
      
        
        <h2 id="modifier-keys">MODIFIER KEYS</h2>

        
      
        
        <p>Bind the current set of modifier keys from local storage. If no</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindModifierKeys</span>:<span class="function"> =&gt;</span>
        <span class="property">@parseModifierKeys</span> <span class="property">@$modifierDelete</span>, SystemApp.Data.userSettings.modifierDelete()
        <span class="property">@parseModifierKeys</span> <span class="property">@$modifierMultiple</span>, SystemApp.Data.userSettings.modifierMultiple()
        <span class="property">@parseModifierKeys</span> <span class="property">@$modifierToBack</span>, SystemApp.Data.userSettings.modifierToBack()</pre></div>
        
      
        
        <p>Parse a combination of modifier keys and highlight the matched div&#39;s elements.</p>

        
          <div class='highlight'><pre>    <span class="attribute">parseModifierKeys</span>: <span class="function"><span class="params">(div, combination)</span> =&gt;</span>
        keys = combination.replace(<span class="string">"  "</span>, <span class="string">" "</span>).split <span class="string">" "</span>
        div.find(<span class="string">".active"</span>).removeClass <span class="string">"active"</span>
        div.find(<span class="string">".<span class="subst">#{k}</span>"</span>).addClass(<span class="string">"active"</span>) <span class="keyword">for</span> k <span class="keyword">in</span> keys</pre></div>
        
      
        
        <p>When user clicks on a modifier span, highlight it and save to the current
<a href="userSettings.html">User Settings</a>.
TODO! Refactor this handler to prevent duplicates, then edit the UserSettings accordingly.</p>

        
          <div class='highlight'><pre>    <span class="attribute">modifierClick</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">return</span>;

        src = $ e.target
        parent = src.parent()
        modifierWrapper = parent.parent()
        modifierName = modifierWrapper.data <span class="string">"modifier"</span>
        modifierValue = <span class="string">""</span></pre></div>
        
      
        
        <p>If span is already selected, set <code>empty</code> to true to unselect it.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> src.hasClass <span class="string">"active"</span>
            empty = <span class="literal">true</span>
        <span class="keyword">else</span>
            empty = <span class="literal">false</span>

        parent.children(<span class="string">"span"</span>).removeClass(<span class="string">"active"</span>)
        src.addClass <span class="string">"active"</span> <span class="keyword">if</span> <span class="keyword">not</span> empty</pre></div>
        
      
        
        <p>Get active elements and generate the modifier value based on their
classe names, excluding the <code>.active</code> class and trimmed down.</p>

        
          <div class='highlight'><pre>        activeKeys = modifierWrapper.find <span class="string">".active"</span>
        modifierValue += <span class="string">" "</span> + $(k).attr <span class="string">"class"</span> <span class="keyword">for</span> k <span class="keyword">in</span> activeKeys
        modifierValue = modifierValue.replace <span class="regexp">/active/g</span>, <span class="string">""</span>
        modifierValue = modifierValue.replace <span class="string">"  "</span>, <span class="string">" "</span>
        modifierValue = $.trim modifierValue

        console.log <span class="string">"New modifier combination for <span class="subst">#{modifierName}</span>"</span>, modifierValue</pre></div>
        
      
        
        <p>Set the new modifier value and save the model ONLY locally.</p>

        
          <div class='highlight'><pre>        SystemApp.Data.userSettings.set <span class="string">"modifier<span class="subst">#{modifierName}</span>"</span>, modifierValue</pre></div>
        
      
        
        <h2 id="local-storage">LOCAL STORAGE</h2>

        
      
        
        <p>Bind the local storage contents to the <code>@$localStorageDiv</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindLocalStorage</span>:<span class="function"> =&gt;</span>
        <span class="property">@$localStorageDiv</span>.html JSON.stringify(JSON.parse(localStorage.localData), <span class="literal">null</span>, <span class="number">4</span>)</pre></div>
        
      
        
        <p>Clear the local storage. Ask the user if he really wants to proceed, first.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearLocalStorage</span>:<span class="function"> =&gt;</span>
        $.localData.flush()
        <span class="property">@$localStorageDiv</span>.html <span class="string">"CLEARED!"</span>
        SystemApp.Data.userSettings.save()</pre></div>
        
      
        
        <h2 id="server-errors">SERVER ERRORS</h2>

        
      
        
        <p>Bind the server errors array to the <code>@$serverErrorsDiv</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindServerErrors</span>:<span class="function"> =&gt;</span>
        result = <span class="string">""</span>
        errorList = SystemApp.Sockets.serverErrors

        _.each errorList, <span class="function"><span class="params">(err)</span> -&gt;</span>
            time = err.timestamp.toTimeString()
            sep = time.indexOf <span class="string">"("</span>
            time = time.substring(<span class="number">0</span>, sep - <span class="number">1</span>) <span class="keyword">if</span> sep &gt; <span class="number">0</span>
            result += <span class="string">"<span class="subst">#{err.title}</span> <span class="subst">#{err.message}</span> at <span class="subst">#{time}</span>&lt;br /&gt;"</span>

        <span class="property">@$serverLogsDiv</span>.html result</pre></div>
        
      
        
        <p>Clear the server errors list.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearServerErrors</span>:<span class="function"> =&gt;</span>
        SystemApp.alertView.serverErrors = []
        <span class="property">@$serverLogDiv</span>.html <span class="string">"CLEARED!"</span></pre></div>
        
      
        
        <h2 id="show-and-hide">SHOW AND HIDE</h2>

        
      
        
        <p>Bind data after showing the view, and listen to &quot;server:error&quot; events
to populate the <code>$serverErrorsDiv</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">onShow</span>:<span class="function"> =&gt;</span>
        SystemApp.serverEvents.<span class="literal">off</span> <span class="string">"error"</span>, <span class="property">@bindServerErrors</span>
        SystemApp.serverEvents.<span class="literal">on</span> <span class="string">"error"</span>, <span class="property">@bindServerErrors</span>

        <span class="property">@bindOptions</span>()
        <span class="property">@bindLocalStorage</span>()
        <span class="property">@bindServerErrors</span>()
        <span class="property">@bindModifierKeys</span>()</pre></div>
        
      
        
        <p>When view gets hidden, stop listening to the &quot;server:error&quot; events.</p>

        
          <div class='highlight'><pre>    <span class="attribute">onHide</span>:<span class="function"> =&gt;</span>
        SystemApp.serverEvents.<span class="literal">off</span> <span class="string">"error"</span>, <span class="property">@bindServerErrors</span></pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
